var app = getApp()
Page({
  data: {
    level: 0,
    flags:false,

    sysWidth:0,
    sysHeight:0,

    nowMode:0,
    nowWidth:5,
    nowColor:'#2b2b2b',
    nowAlpha:1,

    preColor:'#2b2b2b',
    preAlpha:1,

    nowTool:0,

    touchArr:[],
    duichenArr:[],

    isDuichenLineShow:false,
    duichenNUmber:6,

    colorArr:[],
    colorDolt:[],
    colorArr:[
      "#888888" , "#FF0088" , "#FF0000" , "#FF5511" , "#FF8800" , "#FFBB00" , "#FFFF00" , "#BBFF00" , 
      "#77FF00" , "#00FF00" , "#00FF99" , "#00FFCC" , "#00FFFF"	, "#00BBFF" , "#0066FF" , "#0000FF"  ,
      "#5500FF" , "#7700FF" , "#9900FF" , "#CC00FF" , "#FF00FF" 
    ],
  },

  onLoad: function (options) {
    var that = this

    that.setData({
      level: app.globalData.level
    })
    
    wx.request({
      url: app.globalData.url + 'config/v/' + app.globalData.version,
      success: function (res) {
        that.setData({
          flags : res.data.data.shareflag
        })        
      }
    })
    wx.getSystemInfo({
      success: (res)=>{
        that.setData({
          sysWidth: res.windowWidth,
          sysHeight: res.windowHeight
        })
      }
    });
  },

  onShow: function(){
    var that = this
    that.setData({
      level: app.globalData.level
    })
  },

  onReady: function(e){
    var that = this
    this.context = wx.createCanvasContext('mainCanvas' , this)
    this.context.clearRect(0, 0, that.data.sysWidth, that.data.sysWidth)
    this.context.setFillStyle('#fff')
    this.context.fillRect(0, 0, that.data.sysWidth, that.data.sysWidth)
    this.context.setLineCap('round')
    this.context.setLineJoin('round')
    
  },

  /**
   *  获取触摸点
   */
  touchStart: function(e){
    var that = this
    //得到触摸点的坐标
    that.startX = e.changedTouches[0].x
    that.startY = e.changedTouches[0].y

    let nowMode = that.data.nowMode
    if(nowMode == 0 || that.data.nowTool == 1){
      // 自由模式 - 橡皮
      that.data.touchArr.splice(0 , 0 ,[that.startX , that.startY])
    }else if(nowMode == 1){
      // 左右对称
      that.data.touchArr.splice(0 , 0 , [that.startX , that.startY])
      that.data.duichenArr.splice(0 , 0 , [that.data.sysWidth - that.startX , that.startY])
    }else if(nowMode == 2){
      // 中心对称
      that.data.touchArr.splice(0 , 0 ,[that.startX , that.startY])
    }else if(nowMode == 3){
      // 旋转对称
      that.data.touchArr.splice(0 , 0 , [that.startX , that.startY])
      that.data.duichenArr.splice(0 , 0 , [that.data.sysWidth - that.startX , that.startY])
    }
    
    // 设置画笔颜色
    that.context.setStrokeStyle(that.data.nowColor)
    // 设置线条粗细
    that.context.setLineWidth(that.data.nowWidth)
    // 设置线条透明度
    that.context.setGlobalAlpha(that.data.nowAlpha)
  },
  /**
   * 获取移动触摸点
   */
  touchMove: function(e){
    var that = this

    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y
    that.data.touchArr.splice(1 , 1 , [startX1,startY1])
    
    let nowMode = that.data.nowMode
    if(that.data.nowTool == 1){
      // 橡皮
      that.data.touchArr.splice(1 , 0 , [startX1,startY1])
      let arr = that.data.touchArr

      that.context.moveTo(arr[0][0], arr[0][1])
      that.context.lineTo(arr[1][0], arr[1][1])
      that.context.stroke()

      that.data.touchArr.splice(0 , 1 , [startX1,startY1])
    }else if(nowMode == 0){
      // 自由模式
      that.data.touchArr.splice(1 , 1 , [startX1,startY1])
      let arr = that.data.touchArr

      that.context.moveTo(arr[0][0], arr[0][1])
      that.context.lineTo(arr[1][0], arr[1][1])
      
      that.data.touchArr.splice(0 , 1 , [startX1,startY1])
    }else if(nowMode == 1){
      // 左右对称
      var sysWidth = that.data.sysWidth
      that.data.touchArr.splice(1 , 1 , [startX1,startY1])
      that.data.duichenArr.splice(1 , 1 , [sysWidth - startX1,startY1])

      let arr = that.data.touchArr
      let dcarr = that.data.duichenArr

      that.context.moveTo(arr[0][0], arr[0][1])    
      that.context.lineTo(arr[1][0], arr[1][1])
      
      that.context.moveTo(dcarr[0][0], dcarr[0][1])    
      that.context.lineTo(dcarr[1][0], dcarr[1][1])

      that.data.touchArr.splice(0 , 1 , [startX1,startY1])
      that.data.duichenArr.splice(0 , 1 , [sysWidth - startX1,startY1])
    }else if(nowMode == 2){
      // 中心对称
      that.data.touchArr.splice(1 , 1 , [startX1,startY1])

      let arr = that.data.touchArr
      var deg = Math.floor(360 / that.data.duichenNUmber);

      var halfCanvasWidth = Math.floor(that.data.sysWidth / 2)
      var halfCanvasHeight = Math.floor( (that.data.sysHeight * 0.7 / 2) - (that.data.sysHeight * 0.35 -that.data.sysWidth*0.5 ))
      // console.log(that.data.sysHeight);
      
      for (let i = 0 ; i <= 360 ; i += deg) {
        that.context.save();
        that.context.translate(halfCanvasWidth , halfCanvasHeight);
        that.context.rotate(i / 180 * Math.PI);
        that.context.beginPath();
        that.context.moveTo(arr[0][0] - halfCanvasWidth, arr[0][1] - halfCanvasHeight);
        that.context.lineTo(arr[1][0] - halfCanvasWidth, arr[1][1] - halfCanvasHeight);
        that.context.stroke(); 
        that.context.restore();
      }
      
      that.data.touchArr.splice(0 , 1 , [startX1,startY1])

    }else if(nowMode == 3){
      // 旋转对称
      var sysWidth = that.data.sysWidth
      that.data.touchArr.splice(1 , 1 , [startX1,startY1])
      that.data.duichenArr.splice(1 , 1 , [sysWidth - startX1,startY1])

      let arr = that.data.touchArr
      let dcarr = that.data.duichenArr
      var deg = Math.floor(360 / that.data.duichenNUmber);

      var halfCanvasWidth = Math.floor(that.data.sysWidth / 2)
      var halfCanvasHeight = Math.floor( (that.data.sysHeight * 0.7 / 2) - (that.data.sysHeight * 0.35 -that.data.sysWidth*0.5 ))
      
      for (let i = 0 ; i < 360 ; i += deg) {
        that.context.save();
        that.context.translate(halfCanvasWidth , halfCanvasHeight);
        that.context.rotate(i / 180 * Math.PI);
        that.context.beginPath();
        that.context.moveTo(arr[0][0] - halfCanvasWidth, arr[0][1] - halfCanvasHeight);
        that.context.lineTo(arr[1][0] - halfCanvasWidth, arr[1][1] - halfCanvasHeight);
        that.context.moveTo(dcarr[0][0] - halfCanvasWidth, dcarr[0][1] - halfCanvasHeight);
        that.context.lineTo(dcarr[1][0] - halfCanvasWidth, dcarr[1][1] - halfCanvasHeight);
        that.context.stroke(); 
        that.context.restore();
      }
      that.data.touchArr.splice(0 , 1 , [startX1,startY1])
      that.data.duichenArr.splice(0 , 1 , [sysWidth - startX1,startY1])
    }

    if(nowMode == 0 || nowMode == 1){
      that.context.stroke()
    }
    that.context.draw(true)
    
  },

  touchEnd:function(e){
    this.setData({
      touchArr:[],
      duichenArr:[],
    })
    
  },

  /**
   * 中心对称和旋转对称的对称线条容器
   */
  showLineNumber:function(){
    var that = this
    this.setData({
      isDuichenLineShow:!that.data.isDuichenLineShow
    })
  },

  /**
   * 改变粗细
   */
  changeWidth:function(e){
    var that = this
    var width = e.currentTarget.dataset.width

    that.setData({
      nowWidth : width
    })
  },

  /**
   * 改变颜色
   */
  changeColor:function(e){
    var that = this
    var color = e.currentTarget.dataset.color
    
    that.setData({
      preColor : that.data.nowColor,
      nowColor : color
    })

    // 橡皮
    // if(that.data.nowMode == 4){
    //   that.setData({
    //     nowColor : '#fff',
    //     nowAlpha : 1
    //   })
    // }
  },

  /**
   * 设置线条透明度
   */
  changeAlpha:function(e){
    var that = this
    var alpha = e.currentTarget.dataset.alpha

    that.setData({
      preAlpha : that.data.nowAlpha,
      nowAlpha : alpha
    })
  },

  /**
   * 改变绘画模式
   */
  changMode:function(e){
    var that = this
    var mode = e.currentTarget.dataset.mode

    that.setData({
      nowMode : mode
    })
  },

  /**
   * 改变中心对称线条数量
   */
  changeDCNumber:function(e){
    var that = this
    var number = e.currentTarget.dataset.number
    
    that.setData({
      duichenNUmber : number,
      isDuichenLineShow : !that.data.isDuichenLineShow
    })
  },

  /**
   * 清空画布
   */
  clearCanvas:function(){
    var that = this
    that.context.clearRect(0, 0, that.data.sysWidth, that.data.sysWidth)
    that.context.setFillStyle('#fff')
    that.context.fillRect(0, 0, that.data.sysWidth, that.data.sysWidth)
    that.context.setLineCap('round')
    that.context.setLineJoin('round')
    that.context.draw()
  },

  /**
   * 切换底部工具
   */
  changeTool:function(e){
    var that = this
    
    var tool = e.currentTarget.dataset.tool
    
    that.setData({
      nowTool: tool
    })
    if(that.data.nowColor == '#fff'){
      that.setData({
        nowColor : that.data.preColor
      })
    }
    // 橡皮
    if(tool == 1){
      that.setData({
        preColor:that.data.nowColor,
        preAlpha:that.data.nowAlpha,

        nowColor : '#fff',
        nowAlpha : 1
      })
    }
    // 圆点
    that.setData({
      colorDolt:[Math.floor(that.data.sysWidth / 2) , Math.floor(that.data.sysHeight * 0.85)]
    })
  },

  /**
   * 色盘触摸事件
   */
  // 求两点间的距离   根号( (x1 - x2)^2 + (y1 - y2)^2 )
  getLength:function(arr1 , arr2){
    return Math.sqrt(Math.pow( (arr1[0] - arr2[0]) , 2) + Math.pow( (arr1[1] + arr2[1]) , 2 ) )
  },

  //
  saveImg:function(){
    console.log('save');
    wx.canvasToTempFilePath({
      canvasId: 'mainCanvas',
      quality: 1.0,
      fileType:'jpg',
      success: (res)=>{
        // console.log(res);
        wx.navigateTo({
          url: '/pages/download/download?imgUrl='+res.tempFilePath,
        });
      },
      fail: ()=>{},
      complete: ()=>{}
    }, this);
  },

  // 分享
  onShareAppMessage: function () {
    var that = this
    return {
      title: '创作属于你的艺术!',
      imageUrl: '/images/share.jpg',
      path: '/pages/index/index',
      complete: function (res) {
        console.log('canvas share complete')
        wx.request({
          url: app.globalData.url + 'share_callback',
          data: {
            'openid' : app.globalData.openId
          },
          method:'POST',
          complete: function (res) {
            console.log(res);
            
            app.globalData.level = res.data.data
            that.onShow()
          }
        })
      },
    }
  },
})